<template>
  <div class="echain">
      <div class="echain-validate">
        <div class="select-item box">
            <div @click="selectType(index)" v-for="(item,index) in selectList" :key="index" class="tab" :class="{active: activeIndex ==index}">{{item.name}}</div>
        </div>
        <div class="search-wrap box">
            <div class="icon"></div>
            <input v-model="inputText" :placeholder="placheholderText" type="text">
            <div @click="search" class="btn">搜索</div>
        </div>
      </div>
      <div class="flex-box-align group-height">
        <img src="../../images/groupHeight.png" alt="">
        <span class="flex" style="text-align: left">区块高度</span>
        <span>
          <countup :start-val="1" :end-val="JSON.parse(echain.blocks)" :duration="2" class="demo1"></countup>
        </span>
      </div>
    <div class="shine_line">
      <img src="../../images/shineLine.png" alt="">
    </div>
      <div class="flex-box-align point-num">
        <img src="../../images/pointNum.png" alt="">
        <span class="flex" style="text-align: left">节点数</span>
        <span>
            <countup :start-val="1" :end-val="JSON.parse(echain.nodes)" :duration="2" class="demo1"></countup>
          </span>
      </div>
    <div class="shine_line">
      <img src="../../images/shineLineRotate.png" alt="">
    </div>
      <div class="flex-box-align user-num">
        <img src="../../images/userNum.png" alt="">
        <span class="flex" style="text-align: left">用户数</span>
        <span>
            <countup :start-val="1" :end-val="JSON.parse(echain.transx)" :duration="2" class="demo1"></countup>
          </span>
      </div>
    <div class="shine_line">
      <img src="../../images/shineLine.png" alt="">
    </div>
      <div class="flex-box-align deal-num">
        <img src="../../images/deal.png" alt="">
        <span class="flex" style="text-align: left">交易量</span>
        <span>
            <countup :start-val="1" :end-val="JSON.parse(echain.accounts)" :duration="2" class="demo1"></countup>
          </span>
      </div>
    <div class="shine_line">
      <img src="../../images/shineLineRotate.png" alt="">
    </div>
      <div class="flex-box-align aver-time">
        <img src="../../images/perTime.png" alt="">
        <span class="flex" style="text-align: left">区块生成平均时间</span>
        <span>
            <countup :start-val="1" :end-val="JSON.parse(echain.avertime)" :duration="2" class="demo1"></countup>
          </span>
      </div>
    <div class="shine_line">
      <img src="../../images/shineLine.png" alt="">
    </div>
      <div class="flex-box-align per-second">
        <img src="../../images/dealTotal.png" alt="">
        <span class="flex" style="text-align: left">每秒交易量</span>
        <span>
            <countup :start-val="1" :end-val="JSON.parse(echain.txpertime)" :duration="2" class="demo1"></countup>
          </span>
      </div>
    <menu-list></menu-list>
  </div>
</template>

<script>
  import menuList from '../common/navbar-menu'
  import { Countup } from 'vux'
  import {parseUrlParams} from "../../util";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    components: {
      Countup,
      menuList
    },
    data () {
      return {
        echain: {},
         activeIndex:0,
        inputText:'',
        selectList:[{
            name:'搜主题'
        },{
            name:'搜地址'
        }],
        placheholderText:'请输入要搜索的投票主题信息'
      }
    },
    mounted(){
      this.getEchain()
    },
    methods:{
      getEchain() {
        common.requestAjax(CONSTANT.URL.ECHAIN.ECHAIN,{}, {}, (res) => {
          if(res.status == 200) {
            this.echain = res.data.bussData
          }
        })
      },
              search(){
            if(!this.inputText){
                let text = this.activeIndex == 1?'请输入区块链地址':'请输入投票主题信息'
                this.$vux.toast.show({
                    text:text,
                    type:'cancel'
                })
                return;
            }
            let link = this.activeIndex == 1?'validateResult':'voteResultList'
            this.$router.push({ path: link, query: { val:this.inputText }})
            let  url = CONSTANT.URL.VOTE.FINDVOTELIST,
                param = {
                    voteTitleLike:this.inputText
                },
                dataForm = {
                    pageIndex:1,
                    pageSize:10
                }
            common.requestAjax(url,param,dataForm,(res)=>{
                if(res.status == 200){

                }else{
                }
            })    
        },
        selectType(num){
            this.activeIndex = num;
            this.placheholderText = this.activeIndex == 1?'请输入要搜索的区块链地址':'请输入要搜索的投票主题信息'
        }
    },
  }
</script>

<style lang="scss">
  .echain {
    padding: .1rem 0 .63rem;
    color: #fff;
    height: 100%;
    font-size: .4rem;
    text-align: center;
    background: url("../../images/echainBg.png") 0 0 no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    .group-height {
      padding: 0 .35rem 0 .45rem;
      img {
        width: .66rem;
        height: .66rem;
        vertical-align: middle;
        margin-right: .29rem;
      }
    }
    .point-num {
      padding: 0 .35rem 0 .45rem;
      img {
        width: .67rem;
        height: .67rem;
        vertical-align: middle;
        margin-right: .29rem;
      }
    }
    .user-num {
      padding: 0 .35rem 0 .45rem;
      img {
        width: .66rem;
        height: .66rem;
        vertical-align: middle;
        margin-right: .29rem;
      }
    }
    .deal-num {
      padding: 0 .35rem 0 .45rem;
      img {
        width: .66rem;
        height: .66rem;
        vertical-align: middle;
        margin-right: .29rem;
      }
    }
    .aver-time {
      padding: 0 .35rem 0 .45rem;
      img{
        width: .69rem;
        height: .69rem;
        vertical-align: middle;
        margin-right: .29rem;
      }
    }
    .per-second {
      padding: 0 .35rem 0 .45rem;
      img{
        width: .63rem;
        height: .63rem;
        vertical-align: middle;
        margin-right: .29rem;
      }
    }
    .shine_line {
      img {
        width: 100%;
        height: .8rem;
        vertical-align: middle;
      }
    }
  }
      .echain-validate{
        // margin-top: .1rem;
        // overflow: hidden;
        margin-bottom: .62rem;
        .select-item{
            font-size: .28rem;
            color: #fff;
            margin: .3rem 0 0 .3rem;
            .tab{
                width: 1.89rem;
                height: .63rem;
                text-align: center;
                line-height: .63rem;
                color: #333;
                box-sizing: border-box;
                font-size: .32rem;
                background-color: #c8e5fc;
                &:first-child{
                  border-top-left-radius: .04rem;
                  -webkit-border-top-left-radius: .04rem;
                  border-bottom-left-radius:  .04rem;
                  -webkit-border-bottom-left-radius:  .04rem;
                }
                &:last-child{
                  border-top-right-radius: .04rem;
                  -webkit-border-top-right-radius: .04rem;
                  border-bottom-right-radius:  .04rem;
                  -webkit-border-bottom-right-radius:  .04rem;
                }
                &.active{
                    background-color: #fff;
                }
            }
        }
        .search-wrap{
            position: relative;
            width: 6.87rem;
            height: .63rem;
            margin: .09rem auto 0;
            border-radius: .04rem;
            -webkit-border-radius: .04rem;
            background-color: #fff;
            .icon{
                width: .3rem;
                height: .31rem;
                background-image: url(../../images/search.png);
                background-size: 100%;
                margin: .15rem .17rem 0 .3rem;
            }
            input{
                height: .63rem;
                width: 4.3rem;
                border: 0px;
                font-size: .30rem;
                color: #999;
                &:focus{
                    outline: 0;
                }
            }
        }
        .btn{
            position: absolute;
            font-size: .30rem;
            right: 0;
            color: #fff;
            background-color: #198AE7;
            border-top-right-radius:.04rem;
            border-bottom-right-radius:.04rem;
            width: 1rem;
            text-align: center;
            line-height: .63rem;
            height: .63rem;
        }
    }
</style>
